<template>
    <!--用户等级-->
    <div class="content_panel project_modules deal-list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('operation.userLevel')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="phone" label="">
                            <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="id" label="">
                            <el-input v-model="form.id" placeholder="User ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="appName">
                            <el-select @change='selectAppName'  v-model="form.appName" :placeholder="$t('system.appName')" style="width:100%;" clearable>
                                <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name" ></el-option><!--APP名称-->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="realName">
                            <el-input v-model="form.realName" maxlength="100" :placeholder="$t('system.userName')" clearable></el-input><!--用户名-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="borrowTimes">
                            <el-input v-model="form.borrowTimes" maxlength="100" :placeholder="$t('operation.borrowAgainCount')" clearable></el-input><!--复借次数-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="registerTime" label=""><!--注册时间-->
                            <el-date-picker
                                style="width:100%"
                                v-model="form.registerTime"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="timestamp"
                                :editable="false"
                                range-separator="-"
                                :default-time="['00:00:00', '23:59:59']"
                                :start-placeholder="$t('audit.registerStartTime')"
                                :end-placeholder="$t('audit.registerEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="showDialog" type="primary" :disabled="selectedIdList.length == 0">{{ $t('operation.batchOperation') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" @selection-change="handleTableSelect" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column :label="$t('common.allChoose')" type="selection" width="50"></el-table-column>
                        <el-table-column prop="id" label="User ID" min-width="60"></el-table-column><!--userId-->
                        <el-table-column prop="appName" :label="$t('system.appName')" min-width="150"></el-table-column><!--APP名称-->
                        <el-table-column prop="levelName" :label="$t('operation.userLevel')" min-width="130"></el-table-column><!--用户等级-->
                        <el-table-column prop="borrowTimes" :label="$t('operation.borrowAgainCount')" min-width="80"></el-table-column><!--复借次数-->
                        <el-table-column prop="realName" :label="$t('common.name')" min-width="130"></el-table-column><!--姓名-->
                        <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="130"></el-table-column><!--手机号-->
                        <el-table-column align="left" :label="$t('common.registerTime')" min-width="130"><!--注册时间-->
                            <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
                </div>
            </div>
        </div>

        <!--修改用户等级start-->
        <el-dialog :visible.sync="showLevelDialog" width="400px" :title="$t('operation.userLevel')">
            <el-form ref="dialogForm" :model="dialogForm" :inline="true" :rules="dialogRules">
                <el-form-item :label="$t('operation.userLevelName')" prop="levelNum"> <!--用户等级名称-->
                    <el-select v-model="dialogForm.levelNum" :clearable='true' :placeholder="$t('verify.plsChoose')" style="width: 100%">
                        <el-option v-for="(item, index) in allLevelList" :key="index" :label="item.levelName" :value="item.levelNum" v-if="item.active== '0'"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="submit" type="primary">{{$t('common.confirm')}}</el-button>
                <el-button @click="showLevelDialog = false" type="default">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
        <!--修改用户等级end-->
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';

    let that = null;
    export default {
        name: 'operation-levelManage-userLevel',
        components: {
            Pagination,
        },
        mixins: [mixin],
        data() {
            return {
                userId: this.$storage.get('user').id,
                form: {
                    phone: '',
                    id: '',
                    appName: '',
                    realName: '',
                    borrowTimes: '',
                    registerTime: ''
                },
                selectedIdList: [],
                rules: {
                    phone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    id: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    borrowTimes: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    appName:[
                        {
                            required:true,
                            message:this.$t('common.plsSelectApp')
                        }
                    ]
                },
                appList: [],
                allLevelList: [],
                dialogForm: {
                    levelNum: '',
                },
                dialogRules: {
                    levelNum: [
                        {required: true, message: this.$t('verify.plsInput')},
                    ],
                },
                showLevelDialog: false,
            };
        },
        methods: {
            //选择appName 之后获取对应的用户等级
            selectAppName(value){
                console.warn(value)
                if(value&&value!==''){
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            },
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.customer.list(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 265;
                });
            },
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    phone: form.phone,
                    id: form.id,
                    appName: form.appName,
                    realName: form.realName,
                    borrowTimes: form.levelName,
                    startDate: '',
                    endDate: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    },
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                if (form.registerTime && form.registerTime.length) {
                    params.startDate = form.registerTime[0];
                    params.endDate = form.registerTime[1];
                }
                return params;
            },
            // 显示修改用户等级弹框
            showDialog(row) {
                if(this.form.appName){
                this.dialogForm.levelNum = '';
                this.getAllLevelList(this.form.appName)
                }else{
                    this.$message({
                     message: this.$t('common.plsSelectApp'),
                     type: 'warning'
                    });
                }
            },
            // 提交修改
            submit() {
                this.$refs.dialogForm.validate(val => {
                    if (val) {
                        const  { dialogForm } = this;
                        const params = {
                            ids: this.selectedIdList.join(','),
                            levelNum: dialogForm.levelNum
                        }
                        params.levelName = this.allLevelList.filter(item => {
                            return item.levelNum == dialogForm.levelNum;
                        })[0].levelName;
                        this.$api.operation.updateUserLevel(params).then(res => {
                            const {status, data, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.showLevelDialog = false;
                                this.getTableData();
                            }
                        });
                    }
                });
            },
            // 列表多选处理
            handleTableSelect(val) {
                this.selectedIdList = [];
                val.forEach(item => {
                    this.selectedIdList.push(item.id);
                });
            },
            getAllLevelList(appName) {
                const params = {
                    levelName: '',
                    active: '',
                    appName:appName
                }
                this.$api.operation.queryLevelConfig(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.allLevelList = data;
                        this.showLevelDialog = true;
                        this.$nextTick( () => {
                            this.$refs.dialogForm.clearValidate();
                        });

                    }
                });
            },
            getCompanyList() {
                const params = {
                    appListDomain: this.$storage.get('user').domain,
                };
                this.$api.systemManage.getAppListdomain(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.appList = data || [];
                    }      
                });
            },
        },
        filters: {
        },
        created() {
            that = this;
            // this.getTableData({currentPage: this.page.currentPage}, this.form);
            this.getCompanyList();
            this.$message({
             message: this.$t('common.plsSelectApp'),
             type: 'warning'
            });
            // this.getAllLevelList();
        },
    };
</script>

<style lang="scss">
    [data-page=operation-levelManage-userListLevel] {
        .noteRed {
            color: red;
        }
        .iptWidth {
            width: 200px;
        }
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
    }
</style>
